<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li{
            float: left;
            list-style: none;
            width: 100px;
            height: 80px;
            background-color: red;
            text-align: center;
            line-height: 80px;
            border: 1px solid black;
        }
        ul{
            width: 1500px;
            height: 180px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--
    点击第一个li改变背景颜色
    点击第二个li改变字体大小
    点击第三个li弹出一个弹窗
-->
<ul>
    <li id="box1">第一项</li>
    <li id="box2">第二项</li>
    <li id="box3">第三项</li>
</ul>
    <script type="text/javascript">
        //用事件委托，把li的点击事件委托给ul
        document.getElementsByTagName("ul")[0].onclick=function (event) {
             //获取事件对象
            var event=event||window.event;
            //获取目标事件
            var tar=event.target;
            console.log(tar.nodeName.toLowerCase());
            //第一步先判断，点击的到底是li还是ul，如果是li才进行下一步的判断，然后做逻辑处理
            if(tar.nodeName.toLowerCase()=="li"){
                console.log(tar.id);
                //判断tar.id结果，结果有多个值，所以用switch
                switch (tar.id){
                    case "box1":
                        document.getElementById("box1").style.backgroundColor="yellow";
                        break;
                    case "box2":
                        document.getElementById("box2").style.color="blue";
                        break;
                    case "box3":
                        alert("我是盒子三，我被点击了");
                        break;
                }

            }



        }



    </script>
</body>
</html>